<!doctype html>
<html>
<head>
<script src="//cdn.anychart.com/js/7.4.0/anychart.min.js"></script>
<style>
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
anychart.onDocumentReady(function () {
var stage = anychart.graphics.create('container');
var gauge = anychart.circularGauge();
gauge.container(stage);
gauge.title(null)
.fill(null)
.stroke(null);
gauge.title().fontWeight('normal')
.fontFamily('Verdana')
.fontColor('#474747')
.fontSize('14px');
gauge.axis().labels().fontWeight('normal')
.fontFamily('Verdana')
.fontColor('#474747')
.fontSize('14px');
gauge.data([63]);
gauge.axis().scale()
.minimum(0)
.maximum(100)
.ticks({interval: 10})
.minorTicks({interval: 5});
gauge.axis()
.startAngle(270)
.fill('#929292')
.width(1)
.sweepAngle(270)
.ticks({type: 'trapezium', fill: '#474747', length: 10})
.minorTicks({type: 'trapezium', fill: '#474747', length: 4});
gauge.range(0, {
from: 55,
to: 70,
position: 'i',
fill: '#D96B2B',
stroke: '1 #000',
startSize: 4,
endSize: 4,
radius: 108
});
gauge.range(1, {
from: 70,
to: 100,
position: 'i',
fill: '#731728',
stroke: '1 #000',
startSize: 4,
endSize: 4,
radius: 108
});
gauge.needle()
.fill('#929292')
.stroke('1px rgba(2,2,2,.2)')
.startRadius('0%')
.endRadius('90%')
.middleRadius(0)
.startWidth('0.1%')
.endWidth('0.1%')
.middleWidth('5%');
gauge.cap()
.radius('10%')
.fill('#474747');
internalGauge = anychart.circularGauge();
internalGauge.container(stage);
internalGauge
.data([81])
.bounds('20%', '60%', '25%', '35%')
.fill('none')
.stroke('none');
internalGauge.axis()
.scale()
.minimum(0)
.maximum(100)
.ticks().interval(10);
internalGauge.axis().labels().fontWeight('normal')
.fontFamily('Verdana')
.fontColor('#474747')
.fontSize('10px');
internalGauge.axis()
.startAngle(180)
.fill('#474747')
.zIndex(0)
.labels();
internalGauge.axis().ticks({type: 'trapezium', fill: '#474747', length: 15});
internalGauge.needle()
.fill('#929292')
.stroke('1px rgba(2,2,2,.2)')
.startRadius('0%')
.endRadius('90%')
.middleRadius(0)
.startWidth('0.1%')
.endWidth('0.1%')
.middleWidth('5%');
internalGauge.cap()
.radius('10%')
.fill('#474747');
internalGauge.range(0, {
from: 75,
to: 95,
position: 'i',
fill: '#D96B2B',
stroke: '1 #000',
startSize: 6,
endSize: 6,
radius: 113,
zIndex: 1
});
internalGauge.range(1, {
from: 95,
to: 100,
position: 'i',
fill: '#731728',
stroke: '1 #000',
startSize: 6,
endSize: 6,
radius: 113,
zIndex: 1
});
gauge.draw();
internalGauge.draw()
});
</script>
</body>
</html>